<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>楼盘详细</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/jquery.tmpl.js"></script>
    <![endif]-->
</head>
<body style="overflow-x: hidden">
<!--引入导航栏-->
<nav th:replace="~{topbar::top}"></nav>

<!-- 楼盘大标题 -->
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <h3 style="font-weight: bold; font-size: 32px; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    <span th:text="${estate.estateName}">南湖国际社区</span>
                </h3>
                <div>
                    <span style="color: grey" th:text="${estate.position}">(天府新区南湖)南湖西路175号</span>
                </div>
            </div>
            <div class="col-md-5">
                <div class="row" style="text-align: right">
                    <form class="form-inline" style="padding-right: 15px; padding-top: 20px;" action="/house_list" method="post">
                        <div class="form-group">
                            <input type="text" size="50" class="form-control" id="search" name="title" placeholder="请输入你要查找的楼盘">
                        </div>
                        <button type="submit" class="btn btn-default" aria-label="Left Align">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 左侧照片和右侧信息 -->
<div class="container">
    <div class="col-md-8">
        <div class="img-fluid">
            <img src="house04.jpg" th:src="${estate.picture}" style="display: block" height="400" width="710">
        </div>
    </div>
    <div class="col-md-4">
        <div class="row" style="padding-left: 20px">
            <h1 style="color: #db4c3f; font-weight: bold; font-size: 55px; display: inline" th:text="${estate.avgPrice}">16600</h1>
            <h5 style="padding-right: 20px;color: #db4c3f; font-weight: bold; font-size: 16px; display: inline">元/平米</h5>
            <h5 style="color: grey; font-weight: bold; font-size: 12px; display: inline" >参考均价</h5>
        </div>
        <div class="" style="padding-left: unset; padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
        <div class="row" style="padding-left: 20px">
            <input id="estateName" type="hidden" th:value="${estate.estateName}" >
            <div class="row" style="padding-left: 20px; padding-bottom: 10px">
                <span style="color: grey; font-weight: bold; padding-right: 20px">建筑年代</span>
                <span style="padding-right: 20px" th:text="${estate.buildingYear}">2010年建成</span>
            </div>

            <div class="row" style="padding-left: 20px; padding-bottom: 10px">
                <span style="color: grey; font-weight: bold; padding-right: 20px">建筑类型</span>
                <span style="" th:text="${estate.buildingType}">板楼/塔板结合</span>
            </div>

            <div class="row" style="padding-left: 20px; padding-bottom: 10px">
                <span style="color: grey; font-weight: bold; padding-right: 20px">物业费用</span>
                <span style="" th:text="${estate.propertyCost}">1.5元/平米/月</span>
            </div>

            <div class="row" style="padding-left: 20px; padding-bottom: 10px">
                <span style="color: grey; font-weight: bold; padding-right: 20px">物业公司</span>
                <span style="" th:text="${estate.propertyCompany}">成都森宇物业有限公司</span>
            </div>

            <div class="row" style="padding-left: 20px; padding-bottom: 10px">
                <span style="color: grey; font-weight: bold; padding-right: 35px">开发商</span>
                <span style="" th:text="${estate.developer}">成都森宇物业有限公司</span>
            </div>

            <div class="row" style="padding-left: 20px; padding-bottom: 10px">
                <span style="color: grey; font-weight: bold; padding-right: 20px">楼栋总数</span>
                <span style="" th:text="${estate.buildingSum}">41栋</span>
            </div>

            <div class="row" style="padding-left: 20px; padding-bottom: 10px">
                <span style="color: grey; font-weight: bold; padding-right: 20px">房屋总数</span>
                <span style="" th:text="${estate.houseSum+'户'}">9797户</span>
            </div>
            <div class="" style="padding-left: unset; padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
        </div>
    </div>
</div>

<div class="container" style="padding-left: unset; padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>

<div class="container">
    <div class="row" style="padding-left: 30px">
        <span style="font-size: 23px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;" th:text="${estate.estateName}">南湖国际社区</span>
        <span style="font-size: 23px; font-weight:bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">所有二手房</span>
    </div>
</div>

<script id="each1" type="text/x-jquery-tmpl">
        <div class="container">
                <div class="row">
                    <div class="col-md-9">
                        <ul>
                            <li class="row" style="list-style: none; padding: 30px">
                                <img class="col-md-4" src="${picture}">
                                <div class="col-md-8">
                                    <h3><a style="color: black; text-decoration: none; font-weight: bold" href="/house_detail?houseId=${houseId}">${houseName}</a></h3>
                                    <div class="row">
                                        <h5 class="col-md-12">
                                            <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                                            <a style="color: black; text-decoration: none" href="#4">${estateName}</a>
                                            <span >${scale}</span>|
                                            <span >${houseArea}平</span>|
                                            <span >朝向：${orientation}</span>
                                        </h5>
                                    </div>
                                    <div class="row">
                                        <h5 class="col-md-12">
                                            <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                                            <span >${floor}</span>-
                                            <span >${decoration}</span>
                                        </h5>
                                    </div>
                                    <div class="row">
                                        <h5 class="col-md-12">
                                            <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
                                            <span >${createTime}</span>
                                        </h5>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                    <div class="col-md-3" style="padding-top: 40px">
                        <div class="container" style="list-style: none">
                            <h2 style="color: #db4c3f; font-weight: bold; display: inline">${price}</h2>
                            <h5 style="display: inline">万</h5>
                        </div>
                        <div class="container" style="display: block; list-style: none">单价<h5 style="display: inline">20618</h5>元/平米</div>
                    </div>
                </div>
                <hr style="background-color: aliceblue; height: 2px; width: 1130px; margin: unset; border: unset">
            </div>


</script>

<script id="pageview" type="text/x-jquery-tmpl">
        <div class="row">
            <nav style="text-align: right" aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous" id="first">
                            <span aria-hidden="true">首页</span>
                        </a>
                    </li>

                    <li >
                        <a href="#" id="pre" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    <li ><a id="text" style="color: black">第${current}页/共${pages}页</a></li>
                    <li >
                        <a href="#" id="next" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span></a>
                    </li>

                    <li>
                        <a href="#" id="final">
                            <span aria-hidden="true" >末页</span>
                        </a>
                    </li>

                </ul>
            </nav>
        </div>
    </script>
<script>
    var hasNextPage;
    var hasPrePage;
    var estateName;
    var current;
    var sumpage;

    $(function () {
        estateName = $("#estateName").val();
        console.log(estateName);
        $.ajax({
            type: "get",
            url: "/ajax_house_list?estateName=" + estateName,
            dataType: "json",
            success: populate
        });

        function populate(data) {
            console.log(data);
            hasNextPage = eval('data.hasNextPage');
            hasPrePage = eval('data.hasPrePage');
            current = eval('data.current');
            sumpage = eval('data.pages');
            //模板   绑定    数据      添加到   指定的div或者是容器里面
            $('#content').html('');
            $('#each1').tmpl(eval('data.result')).appendTo('#content');
            $('#page').html('');
            $('#pageview').tmpl(data).appendTo('#page');

            $("#next").click(function () {
                if (hasNextPage) {
                    $.ajax({
                        type: "get",
                        url: "/ajax_house_list?estateName=" + estateName + "&page=" + (++current),
                        dataType: "json",
                        success: solve
                    });

                    function solve(data) {
                        hasNextPage = eval('data.hasNextPage');
                        hasPrePage = eval('data.hasPrePage');
                        current = eval('data.current');
                        /*console.log(data);
                        console.log(hasPrePage);
                        console.log(hasNextPage);*/
                        //模板   绑定    数据      添加到   指定的div或者是容器里面
                        $('#content').html('');
                        $('#each1').tmpl(eval('data.result')).appendTo('#content');
                        /* $('#pageview').tmpl(data).replaceAll('#page');*/
                        $("#text").text("第" + current + "页/共" + sumpage + "页");
                    }

                }
            });
            $("#pre").click(function () {
                console.log(hasPrePage);
                if (hasPrePage) {
                    $.ajax({
                        type: "get",
                        url: "/ajax_house_list?estateName=" + estateName + "&page=" + (--current),
                        dataType: "json",
                        success: solve
                    });

                    function solve(data) {
                        hasNextPage = eval('data.hasNextPage');
                        hasPrePage = eval('data.hasPrePage');
                        current = eval('data.current');
                        /*console.log(data);
                        console.log(hasPrePage);
                        console.log(hasNextPage);*/
                        //模板   绑定    数据      添加到   指定的div或者是容器里面
                        $('#content').html('');
                        $('#each1').tmpl(eval('data.result')).appendTo('#content');
                        $("#text").text("第" + current + "页/共" + sumpage + "页");
                        /*$('#pageview').tmpl(data).replaceAll('#page');*/
                    }

                }
            })
            $("#first").click(function () {
                if (current != 1) {
                    $.ajax({
                        type: "get",
                        url: "/ajax_house_list?estateName=" + estateName + "&page=" + 1,
                        dataType: "json",
                        success: solve
                    });

                    function solve(data) {
                        hasNextPage = eval('data.hasNextPage');
                        hasPrePage = eval('data.hasPrePage');
                        current = eval('data.current');
                        /*console.log(data);
                        console.log(hasPrePage);
                        console.log(hasNextPage);*/
                        //模板   绑定    数据      添加到   指定的div或者是容器里面
                        $('#content').html('');
                        $('#each1').tmpl(eval('data.result')).appendTo('#content');
                        /* $('#pageview').tmpl(data).replaceAll('#page');*/
                        $("#text").text("第" + current + "页/共" + sumpage + "页");
                    }

                }
            });
            $("#final").click(function () {
                if (hasNextPage && current != sumpage) {
                    $.ajax({
                        type: "get",
                        url: "/ajax_house_list?estateName=" + estateName + "&page=" + sumpage,
                        dataType: "json",
                        success: solve
                    });

                    function solve(data) {
                        hasNextPage = eval('data.hasNextPage');
                        hasPrePage = eval('data.hasPrePage');
                        current = eval('data.current');
                        /*console.log(data);
                        console.log(hasPrePage);
                        console.log(hasNextPage);*/
                        //模板   绑定    数据      添加到   指定的div或者是容器里面
                        $('#content').html('');
                        $('#each1').tmpl(eval('data.result')).appendTo('#content');
                        /* $('#pageview').tmpl(data).replaceAll('#page');*/
                        $("#text").text("第" + current + "页/共" + sumpage + "页");
                    }

                }
            });
        }
    })
</script>

<div>
    <div id="content"></div>
    <div class="container">
        <div id="page"></div>
    </div>
</div>


</body>
</html>